<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="fonts/iconfont.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
<script src="js/common_js.js" type="text/javascript"></script>
<script src="js/footer.js" type="text/javascript"></script>
<script src="js/lrtk.js" type="text/javascript"></script>
<script src="js/vue.js" type="text/javascript"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<title>购物车</title>
</head>

<body>
<!--顶部图层-->
<div id="header_top">
	<page-header></page-header>
</div>
<!--购物车样式-->
  <div class="Inside_pages">
    <div class="Process_img"><img src="images/Process_img_01.png" /></div>
    <div class="content mar_20" id="cart">
    	<table border="0" class="car_tab" style="width:1200px; margin-bottom:50px;" cellspacing="0" cellpadding="0">
          <tbody>
			  <tr>
				<td class="car_th" width="490">商品名称</td>
				<td class="car_th" width="150">购买数量</td>
				<td class="car_th" width="130">小计</td>
				<td class="car_th" width="150">操作</td>
			  </tr>
			  <tr v-for="(ct,index) in carts">
				<td>
					<div class="c_s_img"><img :src="ct.picture" width="73" height="73"></div>
					{{ct.attribute}}
				</td>
				<td align="center">
					<div class="c_num">
						<input type="button" value="-" @click="decrement(index)" class="car_btn_1">
						<input type="text" v-model="ct.count" name="" class="car_ipt">  
						<input type="button" value="+" @click="increment(index)" class="car_btn_2">
					</div>
				</td>
				<td align="center" style="color:#ff4e00;">{{ct.price * ct.count}}</td>
				<td align="center"><button @click="delGoods(index,ct.uId,ct.pId)">删除</button>&nbsp; &nbsp;<a href="#">加入收藏</a></td>
			  </tr>
		  </tbody>
		</table>
        
    </div>
  </div>
 <!--底部图层-->


</body>
<script src="js/common_vue.js" type="text/javascript"></script>
<script type="text/javascript">
	var cart = new Vue({
		el:"#cart",
		data: {
			carts: []
		},
		created() {
			
			console.log(this.carts);
		axios
			.post("/userCart")
			.then(function(response) {
				console.log(response);
				var data = response.data;
				var code = data.code;
				if (code == '200') {
					cart = data.data;
				} else {
					console.log("查询错误");
				}
			})
			.catch(function(err){
				console.log(err);
				this.carts = [{"picture":"http://127.0.0.1:8089/nivea/nivea.jpg","attribute":"妮维雅(NIVEA)男士净油精华抗痘洁面炭泥150ml（洗面奶 控油抗黑头）","price":0.000,"count":2,"uId":18373320883,"pId":1},{"picture":"http://127.0.0.1:8089/nivea/nivea1.jpg","attribute":"妮维雅(NIVEA)去黑头磨砂洁面乳 100g（洗面奶 去黑头 去角质 卸妆）","price":23.900,"count":2,"uId":18373320883,"pId":2}];
				console.log(this.carts);
			})
		console.log()
		},
		methods: {
			delGoods: function(index,uId,pId) {
				let del = new FormData();
				del.append("uId",uId);
				del.append("pId",pId);
				axios
					.post("/delGoods",del)
					.then(function(response) {
						console.log(response);
						/* var data = response.data;
						var code = data.code;
						if (code == '200') {
							window.location.href='/index.html';
						} else {
							this.show = true;
						} */
					})
					.catch(function(err){
						console.log(err);
					});
				this.carts.splice(index,1);
			},
			increment: function(index) {
				this.carts[index].count++;
				let changeData = new FormData();
			//	Long uId, Integer pId, Integer num
				changeData.append("uId", this.carts[index].uId);
				changeData.append("pId", this.carts[index].pId);
				changeData.append("num", this.carts[index].count);
				console.log(changeData);
				axios
					.post("/updateCount",changeData)
					.then(function(response) {
						console.log(response);
					})
					.catch(function(err){
						console.log(err);
					});
			},
			decrement: function(index) {
				this.carts[index].count--;
				let changeData = new FormData();
			//	Long uId, Integer pId, Integer num
				changeData.append("uId", this.carts[index].uId);
				console.log(this.carts[index].uId);
				changeData.append("pId", this.carts[index].pId);
				changeData.append("num", this.carts[index].count);
				console.log(changeData);
				axios
					.post("/updateCount",changeData)
					.then(function(response) {
						console.log(response);
					})
					.catch(function(err){
						console.log(err);
					});
			}
			
		}
		
	});
</script>
<!-- <script src="js/cart_vue.js" type="text/javascript"></script> -->
</html>
